<template>
  <div class="home">
    <!-- 正文 -->
    <div class="page_top">
            <ul class="page_top_ul">
                <li id="top_li5">{{ username }},{{status}} &nbsp; 
                    <a class="exit" href="/">退出</a>
                </li>
            </ul>
    </div>

    <div class="page_banner_top">
            <div class="pink"></div>
            <div class="banner_top_ul">
                <ul>
                    <li><router-link to="/Home/Intro">首页</router-link></li>&nbsp;&nbsp;&nbsp;&nbsp;
                    <li><router-link to="/Home/Division">分工说明</router-link></li>&nbsp;&nbsp;&nbsp;&nbsp;
                    <li><router-link :to="{path:'/Home/UserManage',query:{status}}">用户管理</router-link></li>&nbsp;&nbsp;&nbsp;&nbsp;
                    <li><router-link :to="{path:'/Home/OrdUsers',query:{status}}">设备管理</router-link></li>&nbsp;&nbsp;&nbsp;&nbsp;
                    <li><router-link to="/Home/HistroyData">历史数据</router-link></li>&nbsp;&nbsp;&nbsp;&nbsp;
                    <li><router-link to="/Home/RealTime">实时监控</router-link></li>&nbsp;&nbsp;&nbsp;&nbsp;
                </ul>
            </div>
            <div class="banner_top_input">
                <input type="text" placeholder="请输入内容" height="16px" class="input_hide" maxlength="100px">
                <div class="input_img1"></div>
                <div class="input_img2"><img src="../assets/HomeImg/Vector_搜索框.png" alt=""></div>
            </div>
    </div>

    <!-- 轮播 -->
    <div class="container" :style="{'display':xianshi(this.$route)? 'block' : 'none'}">
        <div class="showImg" >
    <!-- //轮播图片 -->
    <img  @mouseover="changeInterval(true)" 
         @mouseleave="changeInterval(false)"  
         v-for="(item) in imgArr" 
         :key="item.id"
         :src="item.url" 
         alt="图片显示错误" 
         v-show="item.id===currentIndex" 
         class="bu"
         >
    <!-- //左侧按钮 -->
    <div  @click="clickIcon('up')"   class="iconDiv icon-left"> 
        <i class="el-icon-caret-left"></i>
    </div>
    <!-- //右侧按钮 -->
    <div  @click="clickIcon('down')"  class="iconDiv icon-right">
        <i class="el-icon-caret-right"></i>
    </div>
    <!-- //控制圆点 -->
    <div class="banner-circle">
        <ul>
            <li @click="changeImg(item.id)" 
                v-for="(item) in imgArr" 
                :key="item.id"
                :class="item.id===currentIndex? 'active': '' "
             ></li>
        </ul>
    </div>
        </div>
    </div>

    <div class="center">
       <!-- <router-view></router-view> -->
       <router-view></router-view>
    </div>
    

    <div class="button">
                <div class="button_top">
                </div>

                <div class="button_btm">
                    <div class="button_main">
                        <div class="button_dec">
                            <div class="sale_return">
                                <div class="button_ico"><img src="../assets/HomeImg/Vector.png" alt=""></div>
                                <div class="button_sale">品质保证</div>
                            </div>


                            <div class="free_ship">
                                <div class="button_ico"><img src="../assets/HomeImg/Vector.png" alt=""></div>
                                <div class="button_ship">用的放心</div>
                            </div>


                            <div class="quality">
                                <div class="button_ico"><img src="../assets/HomeImg/Vector.png" alt=""></div>
                                <div class="button_qua">
                                    反馈处理
                                </div>
                            </div>
                        </div>


                        <div class="button_mao"></div>

                        <div class="button_last">
                            <ul>
                                <li class="last_1"><a href="#">首页</a></li>
                                <div class="button_shu"></div>
                                <li class="last_2"><a href="#">全部商品</a></li>
                                <div class="button_shu"></div>
                                <li class="last_3"><a href="#">关于我们</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
    </div>

    
    
  </div>
</template>

<script>
import  src01 from '../assets/Carousel/1.jpg'
import  src02 from '../assets/Carousel/2.jpg'
import  src03 from '../assets/Carousel/3.jpg'
import  src04 from '../assets/Carousel/4.jpg'
import  src05 from '../assets/Carousel/5.jpg'
import Division from '../pages/Division'
export default {
    name:'Home',
    components:{Division},
    data () {
    return {
      // 测试路径
    	currentIndex :0,//当前所在图片下标
        timer:null,//定时轮询
        imgArr:[
            {	id:0,
                url:src01,
            },{
                id:1,
                url:src02,
            },{
                id:2,
                url:src03,
            },{
                id:3,
                url:src04,
            },
    {
    id:4,
    url:src05
    }
        ],
        onum:1,
        username:'',
        password:'',
        status:''
        
        }   
    },
    methods:{
//开启定时器
            startInterval(){
				// 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
				clearInterval(this.timer);
				this.timer = setInterval(()=>{
					this.currentIndex++;
					if(this.currentIndex > this.imgArr.length-1){
						this.currentIndex = 0
					}
				},2000)
			},
			// 点击左右箭头
			clickIcon(val){
				if(val==='down'){
					this.currentIndex++;
					if(this.currentIndex===this.imgArr.length){
						this.currentIndex = 0;
					}
				}else{
					/* 第一种写法
					this.currentIndex--;
					if(this.currentIndex < 0){
						this.currentIndex = this.imgArr.length-1;
					} */
					// 第二种写法
					if(this.currentIndex === 0){
						this.currentIndex = this.imgArr.length;
					}
					this.currentIndex--;
				}
            },
			// 点击控制圆点
			changeImg(index){
				this.currentIndex = index
			},
			//鼠标移入移出控制
			changeInterval(val){
				if(val){
					clearInterval(this.timer)
				}else{
					this.startInterval()
				}
			},
            // 路由判断
         xianshi(router){
                if(router.path =="/Home/Intro"){
                    this.startInterval()
                    return true
                }
                else{
                    clearInterval(this.startInterval())
                return false
                }
               
            }

    },
  
    mounted(){
        this.startInterval()
        // console.log( this.$route.query.username);
      
    },
    created(){
        this.username = this.$route.query.username
        this.password = this.$route.query.password
        this.status = this.$route.query.status
    }
}
</script>

<style>
.exit{
    color: white;
    cursor: pointer;
}
#top_li5,#top_li6{
    display: flex;
    color:white;
    cursor: pointer;
}

.bu{
    transition: all 0.5s;
}

/* 轮播样式 */
* {
	padding: 0;
	margin: 0;
}
/* 清除li前面的圆点 */
li {
	list-style-type: none;
}
.showImg{
	position: relative;
    width: 1706px;
    height: 460px;
	margin: 100px auto;
	overflow: hidden;

}
/* 轮播图片 */


/* 箭头图标 */
.iconDiv{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border: 1px solid #666;
	border-radius: 15px;
	background-color: rgba(125,125,125,.2);
	line-height: 30px;
	text-align: center;
	font-size: 25px;
	cursor: pointer;
}
.iconDiv:hover{
	background-color: white;
}
.icon-left{
	left: 10px;
}
.icon-right{
	right: 10px;
}

/* 控制圆点 */
.banner-circle{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 20px;
}
.banner-circle ul{
	margin: 0 50px;
	height: 100%;
	text-align: right;
}
.banner-circle ul li{
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 5px;
	border-radius: 7px;
	background-color: rgba(125,125,125,.8);
	cursor: pointer;
}
.active{
	background-color: black !important; 
}


.container {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}


/* body样式去除 */
body{
     /* 溢出隐藏 */
     overflow-x: hidden;
    display: flex;
    /* 渐变方向从左到右 */
    background: white;
}

* {
    margin: 0px;
    padding: 0px;
}

body {
    margin: auto;
    width: 100%;
}

a {
    text-decoration: none;
    list-style: none;
}

.page_home {
    margin: auto;
    width: 100%;
}

.page_top {
    position: relative;
    width: 100%;
    height: 50px;
    background: #3D3D3D;
}

.page_top a {
    color: #B0B0B0;
}

.page_top ul {
    display: flex;
    line-height: 50px;
    position: absolute;
    right: 194px;
}

li {
    list-style: none;
}

#top_li6 {
    background-color: #424242;
    width: 150px;
    height: 50px;
    right: 194px;
    text-align: center;
}

#top_li6 img {
    margin-left: 24px;
    top: 50%;
    width: 18px;
    height: 18px;
}





/* 我的订单 */

#top_li4 {
    margin-left: 24px;
    width: 72px;
    height: 18px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 50px;
    /* identical to box height, or 18px */
}

#top_li1,
#top_li3 {
    cursor: pointer;
    margin-left: 10px;
    width: 36px;
    height: 18px;
    left: 1320px;
    top: 16px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 50px;
    /* identical to box height, or 18px */
    color: #B0B0B0;
}

#top_li2 {
    margin-left: 10px;
    width: 1px;
    height: 16px;
    background: #C4C4C4;
    margin-top: 18px;
}


/* 头像展示 */

#top_li2_1 {
    margin-left: 10px;
    box-sizing: border-box;
    margin-top: 5px;
    display: none;
    max-width: 40px;
    max-height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

#top_li2_1 img {
    width: 100%;
    height: 100%;
}


/* banner */

.page_banner_top {
    margin: auto;
    /* width: 1534px;
    height: 64px; */
    width: 100%;
    height: 85px;
    display: flex;
    margin-top: 18px;
}

.pink {
    width: 80px;
    height: 64px;
    background: #FFB9B9;
}



.page_banner_top ul {
    display: flex;
    line-height: 64px;
    margin-left: 36px;
}

.page_banner_top ul li a {
    color: #909399;
}

#banner_a1 {
    margin-right: 49px;
}

#banner_a2 {
    margin-right: 47px;
    cursor: pointer;
}

.banner_top_input {
    position: relative;
    width: 375px;
    height: 50px;
    /* background-color: #3D3D3D; */
    margin-left: 505px;
}


/* 超出隐藏 */


/* 小图标 */

.input_img1,
.input_img2 {
    position: absolute;
}

.input_img1 {
    right: 70px;
    background-color: #DCDFE6;
    width: 1px;
    height: 50px;
    top: 0px;
}

.input_img2 {
    right: 28.67px;
    top: 17.54px;
}

.banner_top_input input {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    padding-left: 20px;
    background-color: #F5F7FA;
    outline: none;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
}

.input_hide {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}


/* banner2 */

.banner2_left1,
.banner2_left2 {
    background-color: #B0B0B0;
    margin-left: 194px;
    width: 292px;
    height: 375px;
}

.banner2_left1 {
    margin-top: 24px;
    /* background-image: url("../img/Rectangle\ 24.png"); */
}

.banner2_left2 {
    margin-top: 18px;
    /* background-image: url("../img/Rectangle\ 25.png"); */
}


/* banner3_left */

.banner3_left1,
.banner3_left2 {
    background-color: #B0B0B0;
    margin-left: 194px;
    width: 292px;
    height: 375px;
}

.banner3_left1 {
    margin-top: 24px;
    /* background-image: url("../img/Rectangle\ 31.png"); */
}

.banner3_left2 {
    margin-top: 18px;
    /* background-image: url("../img/Rectangle32.png"); */
}


/* 字体颜色 */

input::-webkit-input-placeholder {
    color: #C0C4CC;
    /* 字体 */
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
}

.banner {
    overflow: hidden;
    position: relative;
    display: flex;
    width: 100%;
    height: 574px;
    /* background-color: #FFB9B9; */
    margin: auto;
}

.banner ul {
    position: absolute;
    display: flex;
    z-index: l;
}

.banner ul li img {
    /* max-width: 100%;
    max-height: 100%; */
    /* vertical-align: middle; */
    height: 574px;
    width: 1532px;
    flex-shrink: 0px;
}


/* banner_ico */

.banner_ico_right,
.banner_ico_left {
    z-index: 2;
    position: absolute;
    width: 46px;
    height: 46px;
    top: 50%;
    transform: translateY(-50%);
}

.banner_ico_right {
    /* margin-left: 1368px; */
    left: 36px;
}

.banner_ico_left {
    /* margin-left: 36px; */
    right: 36px;
}




.center {
    width: 1980px;
    height: 500px;
    margin-top: 24px;
    background-color: #F5F5F5;
    padding-top: 24px;
}
#title{
    text-align:left;
	font-size: 35px;
}


/* button */

.button_top {
    width: 100%;
    height: 20px;
    background-color: #FFFFFF;
    margin: auto;
}

.button_btm {
    width: 100%;
    height: 448px;
    background-color: #2F2F2F;
}


/* buttom_word */

.button_dec {
    display: flex;
    justify-content: space-between;
    height: 43.72px;
    padding: 64.14px 349.9px 0 349.9px;
}

.sale_return,
.free_ship,
.quality {
    display: flex;
    height: 34.16px;
    /* background-color: #FFB9B9; */
}

.free_ship {
    width: 251.09px;
}

.sale_return {
    width: 261.09px;
}

.quality {
    width: 261.09px;
}

.button_ico {
    width: 34.19px;
    height: 43.12px;
    margin-right: 19.9px;
}

.button_ship,
.button_sale,
.button_qua {
    line-height: 40.16px;
    height: 26px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    /* line-height: 100%; */
    /* identical to box height, or 26px */
    color: #FFFFFF;
}

.button_ship img {
    width: 100%;
    height: 100%;
}

.button_sale {
    width: 197px;
    white-space: nowrap;
}

.button_ship {
    width: 188px;
}


/* mao */

.button_mao {
    /* background-image: url("../img/Frame07.png"); */
    /* margin-top: 97.14px; */
    width: 59px;
    height: 59px;
    margin: 97.14px auto;
    overflow: hidden;
    background-size: 100%;
}

.button_last {
    margin: 31px auto;
    width: 300px;
    height: 20px;
}

.button_last ul {
    margin: auto;
    display: flex;
    /* white-space: nowrap; */
}

.button_last ul li a {
    color: #888888;
    height: 20px;
}

.button_shu {
    width: 1px;
    height: 22px;
    background: #888888;
}

.last_1,
.last_2,
.last_3 {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 100%;
    /* identical to box height, or 20px */
    /* 中深灰YC */
    color: #888888;
    /* white-space: nowrap; */
}

.last_1 {
    width: 40px;
}

.last_2 {
    width: 80px;
}

.last_3 {
    width: 80px;
}

.last_1,
.button_shu,
.last_2 {
    margin-right: 24px;
}


/* 二次优化 */

.s-del,
.r-del {
    cursor: pointer;
}


/* 组件优化 */

.banner_top_ul ul li {
    position: relative;
}

.banner_top_ul ul li a::after {
    background-color: #409EFF;
    content: "";
    width: 84px;
    height: 2px;
    position: absolute;
    bottom: 0px;
    left: calc(50% - 42px);
    opacity: 0%;
}

.banner_top_ul ul li a:hover {
    color: #409EFF;
}


/* 透明度做特效 */

.banner_top_ul li:hover a::after {
    transition: 500ms;
    opacity: 1;
}


/* css补充 */

.center_banner1_right_button li:hover,
.center_banner1_right_top li:hover {
    transition: all .2s linear;
    transform: translate(0, -4px);
    cursor: pointer;
    box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.15)
}

.center_banner1_left :hover {
    margin-top: 22px;
    cursor: pointer;
}

.center_banner1_right_button :hover ::before,
.center_banner1_right_top :hover ::before {
    transition: .2s;
    content: '';
}

.banner2_top_ul li:hover {
    color: #409EFF;
    cursor: pointer;
}

.banner_ico_left,
.banner_ico_right,
.center_banner1_left,
.banner2_left,
.banner3_left,
.input_img2 {
    cursor: pointer;
}


/*  */

.register_buttom {
    cursor: pointer;
}

.login_buttom {
    cursor: pointer;
}
</style>